import React, {useEffect, useState} from "react";
import CallOut from "../../imgs/callOut.png";
import Timely from "../../imgs/timely.png";
import Overtime from "../../imgs/overtime.png";
import {Column} from '@ant-design/charts';
import {Pie} from '@ant-design/charts';
import {RingProgress} from '@ant-design/charts';
import {Area} from '@ant-design/charts';
import {Rose} from '@ant-design/charts';
import "../../pages/panel/index.less"
import "antd/dist/antd.css";
import common from "../../common";
import { useHistory } from "react-router-dom";



function Panel() {

    const [callDatail, setCallDatail] = useState([])
    const [pagination,setPagination] = useState({})
    const [pieDatail, setPieDatail] = useState([])
    const history = useHistory();

    //获取时间函数
    function time(newDate) {

        let Y = newDate.getFullYear() + '-';
        let M = (newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1) + '-';
        let D = newDate.getDate() + '  ';
        let h = newDate.getHours() + ':';
        let m = newDate.getMinutes() + ':';
        let s = newDate.getSeconds() + '  ';
        let w = "星期" + "日一二三四五六".split(/(?!\b)/)[newDate.getDay()];

        return Y + M + D + h + m + s + w
    }


    useEffect(() => {
        initCall()
        initPie()
    }, [])


    //工位呼叫明细ajax
    function initCall() {
        let data = {
            "page": 1,
            "limit": 20,
            "total": 2
        }
        common.ajax("GET", "/front/incident/list",data)
            .then(data => {
                console.log(data)
                setCallDatail(data.list)
                setPagination(data.pagination)
            })
    }


    //饼形图呼叫ajax
    function initPie() {
        common.ajax("GET", "/front/panel/list/eventimes")
            .then(data => {
                console.log(data)
                setPieDatail(data.list)
            })
    }


    //月度统计柱状图
    function column() {
        let columnData = [

            {
                name: '缺料',
                line: '一月',
                eventNum: 49,
            },
            {
                name: '呼叫主管',
                line: '一月',
                eventNum: 98,
            },
            {
                name: '设备异常',
                line: '一月',
                eventNum: 150,
            },
            {
                name: '品质异常',
                line: '一月',
                eventNum: 110,
            },
            {
                name: '缺料',
                line: '二月',
                eventNum: 49,
            },
            {
                name: '呼叫主管',
                line: '二月',
                eventNum: 98,
            },
            {
                name: '设备异常',
                line: '二月',
                eventNum: 150,
            },
            {
                name: '品质异常',
                line: '二月',
                eventNum: 110,
            },
            {
                name: '缺料',
                line: '三月',
                eventNum: 49,
            },
            {
                name: '呼叫主管',
                line: '三月',
                eventNum: 98,
            },
            {
                name: '设备异常',
                line: '三月',
                eventNum: 150,
            },
            {
                name: '品质异常',
                line: '三月',
                eventNum: 110,
            },

            {
                name: '缺料',
                line: '四月',
                eventNum: 49,
            },
            {
                name: '呼叫主管',
                line: '四月',
                eventNum: 98,
            },
            {
                name: '设备异常',
                line: '四月',
                eventNum: 150,
            },
            {
                name: '品质异常',
                line: '四月',
                eventNum: 110,
            },
        ];
        let column = {
            data: columnData,
            isGroup: true,
            xField: 'line',
            yField: 'eventNum',
            seriesField: 'name',
            maxColumnWidth: 12,
            dodgePadding: 2,
            color: ['rgb(108, 125, 236)', 'rgb(140, 226, 250)', 'rgb(244, 184, 124)', 'rgb(239, 126, 121)'],

            label: {
                position: 'middle',
                layout: [
                    {type: 'interval-adjust-position'},
                    {type: 'interval-hide-overlap'},
                    {type: 'adjust-color'},
                ],

            },

        };
        return column
    }


    //饼形图
    function pie() {
        let pie = {
            appendPadding: 10,
            data: pieDatail,
            angleField: 'times',
            colorField: 'name',
            radius: 0.75,
            innerRadius: 0.75,
            legend: false,
            color: ["rgb(234,130,121)",
                "rgb(230, 177, 124)",
                "rgb(140, 226, 249)",
                "rgb(104, 121, 230)"],
            label: {
                type: 'spider',
                position: 'start',
                labelHeight: 28,
                autoRotate: "boolean",
                content: '{percentage}',
                style: {
                    textAlign: 'center',
                    fontSize: 12,
                },
            },
            interactions: [{type: 'element-selected'}, {type: 'element-active'}],

            statistic: {
                title: {
                    style: {
                        color: "#FFF",
                        fontSize: 12,
                    },
                    content: "总呼叫次数"
                },
                content: {
                    style: {
                        fontSize: 30,
                        color: "#FFF",
                    },
                    content: pagination.total ,
                },
            },

        };
        return pie
    }


    //环形图
    function ringProgress(proportion, proColor, classification, number) {
        return {
            height: 120,
            width: 120,
            autoFit: false,
            innerRadius: 0.73,
            radius: 0.8,

            percent: proportion,
            color: [proColor, 'rgb(50, 64, 90)'],
            statistic: {
                title: {
                    style: {
                        fontSize: 8,
                    },
                    formatter: function formatter() {
                        return classification;
                    },
                },
                content: {
                    style: {
                        fontSize: 20,
                        color: "#FFF",
                    },
                    formatter: function formatter() {
                        return number;
                    },
                },
            },
        }
    }


    //面积图
    function area() {
        let areaData = [
            {
                "timePeriod": "2010-01",
                "value": 1998
            },
            {
                "timePeriod": "2010-02",
                "value": 1850
            },
            {
                "timePeriod": "2010-03",
                "value": 1720
            },
        ];
        let area = {
            data: areaData,
            xField: 'timePeriod',
            yField: 'value',
            xAxis: {
                range: [0, 1],
            },
        };
        return area
    }


    //玫瑰图
    function rose() {
        let rose = {
            data:pieDatail ,
            xField: 'name',
            yField: 'times',
            seriesField: 'name',
            color: ["rgb(234, 130, 121)", "rgb(241, 185, 128)", "rgb(140,226,249)", "rgb(109, 126, 239)"],
            autoFit: true,
            radius: 0.5,
            innerRadius: 0.45,
            legend: false,
            label: {},

        };
        return rose
    }


    //显示时间组件
    function Clock() {
        const [newDate, setNewDate] = useState(new Date())

        useEffect(() => {
            let t = setInterval(() => {
                setNewDate(new Date())
            }, 1000)

            return () => {
                clearInterval(t)
            }
        }, [])


        return <div className="panel-timeDeta">{time(newDate)}</div>
    }

    return (
        <div className="Panel">
            {/*<DatePicker />*/}

            <div className="panel-nav">
                <div className="panel-nav-shade-left"/>
                <div className="panel-nav-blank"/>
                <div className="panel-nav-blank"/>


                <i className="panel-i-left"/>
                <div className="panel-nav-center">
                    <div className="panel-nav-left"/>
                    Andon监控看板
                    <div className="panel-nav-right"/>

                </div>
                <i className="panel-i-right"/>

                <div className="panel-nav-blank"/>
                <div className="panel-nav-blank"/>
                <div className="panel-nav-shade-right"/>

            </div>

            <div className="panel-quit" onClick={() => {
                history.push("./dataReport")
            }}>退出</div>

            <div className="panel-content">

                <div className="panel-left">
                    <div className="panel-leftT">
                        <div className="panel-leftHead">工位呼叫明细</div>
                        <div className="panel-leftNav">
                            <span className="panel-thread">线程</span>
                            <span>呼叫类型</span>
                            <span>呼叫时间</span>
                            <span>响应时长</span>
                            <span>呼叫时长</span>
                        </div>
                        {callDatail.map((item) => {
                            return (
                                <div className="panel-leftContent" key={item.id}>
                                    <div className="panel-leftId">{item.id}</div>
                                    <div className="panel-callData">{item.lineName}</div>
                                    <div className="panel-callData">{item.eventName}</div>
                                    <div className="panel-callData">{item.createdAt ===null ?  '' : item.createdAt.split(' ')[1]}</div>
                                    <div className="panel-callData">{item.completeAt ===null ?  '' : item.completeAt.split(' ')[1]}</div>
                                    <div className="panel-callData">{item.responseAt ===null ?  '' : item.responseAt.split(' ')[1]}</div>
                                </div>
                            )
                        })}
                        
                    </div>

                    <div className="panel-leftB">
                        月度统计
                        <Column {...column()} style={{width: "340px", height: "130px", margin: "10px 0"}}/>
                    </div>

                </div>

                <div className="panel-center">

                    <div className="panel-centerT">

                        <Clock></Clock>

                        <Pie {...pie()} style={{width: "320px", height: "250px", margin: "15px 0px 20px 130px"}}/>


                        <div className="panel-ringP">


                            {pieDatail.map((item) => {
                                return (<span >
                                    <RingProgress {...ringProgress(item.times/pagination.total,"red",item.name,item.times)} />
                                    </span>
                                )
                            })}

                            {/* <span><RingProgress {...ringProgress((pieDatail.length>0? pieDatail[0].times: 0)/pagination.total, "rgb(234,130,121)", `${pieDatail.length>0? pieDatail[0].name:'0'}`, pieDatail.length>0? pieDatail[0].times:'0' )}/></span>
                            <span><RingProgress {...ringProgress((pieDatail.length>0? pieDatail[1].times: 0)/pagination.total, "rgb(230, 177, 124)", `${pieDatail.length>0? pieDatail[1].name:'0'}`, pieDatail.length>0? pieDatail[1].times:'0' )} /></span>
                            <span><RingProgress {...ringProgress((pieDatail.length>0? pieDatail[2].times: 0)/pagination.total, "rgb(140, 226, 249)", `${pieDatail.length>0? pieDatail[2].name:'0'}`,pieDatail.length>0? pieDatail[2].times:'0')} /></span>
                            <span><RingProgress {...ringProgress((pieDatail.length>0? pieDatail[3].times: 0)/pagination.total, "rgb(104, 121, 230)", `${pieDatail.length>0? pieDatail[3].name:'0'}`, pieDatail.length>0? pieDatail[3].times:'0')} /></span> */}
                        </div>

                    </div>

                    <div className="panel-centerB">
                        今日统计
                        <Area {...area()} style={{height: "130px", margin: "10px 0 0 0 "}}/>
                    </div>

                </div>

                <div className="panel-right">
                    <div className="panel-rightT">
                        呼叫产线分析
                        <Rose {...rose()} />
                    </div>
                    <div className="panel-rightB">
                        呼叫处理情况
                        <div className="panel-call">
                            <div>
                                <div><img src={CallOut} alt="" className="panel-callPic"/></div>
                                <div><img src={Timely} alt="" className="panel-callPic"/></div>
                                <div><img src={Overtime} alt="" className="panel-callPic"/></div>
                            </div>
                            <div className="panel-callRight">
                                <div className="panel-ent">
                                    <div className="panel-calls">
                                        <span>呼叫次数</span>
                                        <span>呼叫次数</span>
                                        <span>呼叫次数</span>
                                    </div>
                                    <div className="panel-calls panel-num">
                                        <span>36844</span>
                                        <span>1849</span>
                                        <span>255</span>
                                    </div>
                                </div>
                                <div className="panel-ent">
                                    <div className="panel-calls">
                                        <span>及时处理</span>
                                        <span>及时处理</span>
                                        <span>及时处理</span>
                                    </div>
                                    <div className="panel-calls panel-nums">
                                        <span>35564</span>
                                        <span>1156</span>
                                        <span>233</span>
                                    </div>
                                </div>
                                <div className="panel-ent">
                                    <div className="panel-calls">
                                        <span>超时次数</span>
                                        <span>超时次数</span>
                                        <span>超时次数</span>
                                    </div>
                                    <div className="panel-calls panel-numsS">
                                        <span>2435</span>
                                        <span>566</span>
                                        <span>22</span>
                                    </div>
                                </div>
                                <div className="panel-calls  panel-ent panel-statistics">
                                    <span>年统计</span>
                                    <span>月统计</span>
                                    <span>周统计</span>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>


        </div>

    )
}

export default Panel;